@extends('web.frame_layout')
<?php $parent_menu = "购物商城"; $menu_selected = "购物中心";?>
<link rel="stylesheet" href="{{asset('web/css/goods-details.css')}}">
<link rel="stylesheet" href="{{asset('web/css/popup.css')}}">
<link rel="stylesheet" href="//at.alicdn.com/t/font_ujr8jqfsro6o5hfr.css">
@section('content')
    <div class="m-right-nr">
        <div>
            <h2><span>购物大厅 - 详情页</span></h2>
        </div>
        <div class="sp-buy">
            <div class="img-box"><img src="{{asset($product->img)}}" alt=""></div>
            <div class="to-buy">
                <h2>{{$product->title}}</h2>
                <h3><span class="nowPlace">￥{{$product->p1}}</span><s>￥{{$product->p2}}</s></h3>
                <h4>
                    <span>商品库存</span>
                    <strong style="border: none;">
                        {{--<button class="minus">-</button>--}}
                        <span>{{$product->num}} </span>
                        {{--<button class="add">+</button>--}}
                    </strong>
                </h4>
                <h4>
                    <span>购买数量</span><strong>
                        <button class="minus">-</button>
                        <input type="text" value="{{$product->unit}}" id="goodsNum">
                        <button class="add">+</button>
                    </strong>
                </h4>
                <h5>
                    <button class="add-cart">加入购物车</button>
                    <button class="ljgm">立即购买</button>
                </h5>
                <h6>
                    <span>保&nbsp;&nbsp;障</span>
                    <i class="iconfont icon-tian"></i>
                    七天无理由退货
                    <i class="iconfont icon-tuihuanhuo"></i>
                    质量问题十五天换货
                </h6>
            </div>
        </div>
        <div class="tuWen">
            {!! $product->detail !!}
        </div>
        <style>

        </style>
    </div>
@endsection

@section('footer')
    <div class="mask"></div>
    <div class="payFor">
        <h3><i class="iconfont icon-guanbi u-close"></i></h3>
        <form method="post" action="{{route('web.cart.pay')}}" id="orderToPay">
            <input type="hidden" name="product_ids" value="{{$product->id}}">
            <input type="hidden" name="product_nos" value="{{$product->no}}">
            <input type="hidden" name="buy_nums" id="buy_nums" value="1">
            <div class="m-address">
                <h3>收货地址：</h3>
                <p>
                    @if(isset($user_addr))
                        <span>{{uAddrStr($user_addr->uid)}}</span>
                        <span>收货人：{{$user_addr->name or ''}}</span>
                        <span>{{$user_addr->tel}}</span>
                        <a href="{{route('web.address')}}" style="float: right;color: red;">修改收货地址</a>
                    @else
                        <a href="{{route('web.address')}}" style="color: red;">添加收货地址</a>
                    @endif
                </p>
            </div>
            {{csrf_field()}}
            <div class="m-payMode">
                <h3>支付方式 <strong>应付金额：<span class="yfje"></span>元</strong><input type="hidden" class="payMoney"
                                                                                 name="payMoney"></h3>
                <select class="wallet" name="wallet">
                    <option value="{{\App\Models\MWallet::$WALLET_TYPE_1}}">
                        {{uWalletStr(\App\Models\MWallet::$WALLET_TYPE_1)}}（{{$user->wallet->w1 }}）
                    </option>
                    <option value="{{\App\Models\MWallet::$WALLET_TYPE_2}}">
                        {{uWalletStr(\App\Models\MWallet::$WALLET_TYPE_2)}}（{{ $user->wallet->w2 }}）
                    </option>
                    <option value="{{\App\Models\MWallet::$WALLET_TYPE_3}}">
                        {{uWalletStr(\App\Models\MWallet::$WALLET_TYPE_3)}}（{{ $user->wallet->w3 }}）
                    </option>
                </select>
            </div>
            <div class="m-password">
                <h3>交易密码</h3>
                <input type="password" name="safepass" id="safepass" placeholder="请输入交易密码">
            </div>
            <div class="m-password">
                <h3>订单备注</h3>
                <textarea name="detail" placeholder="请填写订单备注信息" style="width: 100%;height: 100px;"></textarea>
            </div>
            <div>
                <button class="toPay">立即支付</button>
            </div>
        </form>
    </div>

    <script>

        // 限制大于0的整数
        $('#goodsNum').change(function () {
            if (isNaN($(this).val()) || $(this).val() < 1 || ($(this).val() % 1 != 0)) {
                $(this).val(1)
            }
        });

        // 商品数--
        $('.minus').on('touchend click', function (e) {
            e.preventDefault();
            var num = $('#goodsNum').val();
            num > 1 ? num-- : 1;
            $('#goodsNum').val(num);
            $('#buy_nums').val(num);
        });

        // 商品数++
        $('.add').on('touchend click', function (e) {
            e.preventDefault();
            var num = $('#goodsNum').val();
            num++;
            $('#goodsNum').val(num);
            $('#buy_nums').val(num)
        });

        // 弹出
        $('.ljgm').on('touchend click', function (e) {
            e.preventDefault();
            $('.mask,.payFor').css('display', 'block');
            // 商品数
            var goodsNums = $('#goodsNum').val();
            // 商品价
            var goodsPrice = parseFloat($('.nowPlace').html().slice(1));
            // 订单价格
            var yf = ( goodsNums * goodsPrice).toFixed(2);
            $('.yfje').html(yf);
            //同步input值和金额值
            $('.payMoney').val(yf);
        });

        //关闭
        $('.mask,.u-close').on('touchend click', function (e) {
            e.preventDefault();
            $('.mask,.payFor').css('display', '');
        });

        // 验证规则
        $('#orderToPay').validate({
            rules: {
                wallet: {
                    required: true
                },
                safepass: {
                    required: true
                }
            },
            remote: {
                url: "",     //后台处理程序
                type: "post",               //数据发送方式
                dataType: "json",           //接受数据格式
                data: {                     //要传递的数据
                    password: function () {
                        return $("#password").val();
                    }
                }
            },
            submitHandler: function (form) {
                $(form).ajaxSubmit({
                    dataType: "json",
                    type: "post",
                    beforeSend: function () {
                        //禁用按钮,防止重复提交
                        $(".toPay").attr('disabled', 'disabled')
                    },
                    success: function (data) {
                        if (data.code == 0) {
                            toastr["success"](data.msg);
                            setInterval(function () {
                                window.location.reload();
                            }, 2000);
                        } else {
                            $(".toPay").removeAttr('disabled');
                            toastr["error"](data.msg);
                        }
                    }
                });
            }
        });

        $(".add-cart").on("touchend click", function (e) {
            e.preventDefault();

            var no = "{{$product->no}}";
            var num = $('#goodsNum').val();
            $.post("{{route('web.cart.add')}}", {no: no, 'buy-num': num}, function (data) {
                if (data.code == 0) {
                    toastr["success"]('添加成功');
//                    setInterval(function () {
                    {{--window.location.href="{{route('web.carts')}}";--}}
                    //                    },1500);
                } else {
                    toastr["error"]('添加失败');
                }
            });

        })
    </script>
@endsection